<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Vue.js 导航菜单</title>
    <link rel="shortcut icon" href="../img/logo.png" type="image/x-icon" />
    <link rel="stylesheet" href="css/menu.css">
    <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
</head>

<body>
    <div id="main">
        <!-- 激活的菜单样式为  active 类 -->
        <!-- 为了阻止链接在点击时跳转，我们使用了 "prevent" 修饰符 (preventDefault 的简称)。 -->
        <nav v-bind:class="active" v-on:click.prevent>
            <!-- 当菜单上的链接被点击时，我们调用了 makeActive 方法, 该方法在 Vue 实例中创建。 -->
            <a href="" class="home" v-on:click="makeActive('home')">Home</a>
            <a href="" class="projects" v-on:click="makeActive('projects')">Projects</a>
            <a href="" class="services" v-on:click="makeActive('services')">Services</a>
            <a href="" class="contact" v-on:click="makeActive('contact')">Contact</a>
        </nav>
        <!-- 以下 "active" 变量会根据当前选中的值来自动变换 -->
        <p>您选择了 <b>{{active}}</b> 菜单</p>
    </div>
    <script src="js/active.js"></script>
</body>

</html>